<template>
    <view class='container'>
        <view style="flex: 1;">
            <view v-if="false" class="countdown-time">
                <view class="time">09:34</view>
                <view class="text">剩余时间</view>
            </view>
            <view class="card" style="margin-top: 34rpx;margin-bottom: 28rpx;">
                <view class="card-title">交易信息</view>
                <view class="divider"></view>
                <view class="card-flex">
                    <text class="card-lable">订单编号</text>
                    <text class="card-value">N0316501739698050</text>
                </view>
                <view class="card-flex">
                    <text class="card-lable">交易时间</text>
                    <text class="card-value">N0316501739698050</text>
                </view>
                <view class="card-flex">
                    <text class="card-lable">单价</text>
                    <text class="card-value">jsdf</text>
                </view>
                <view class="card-flex">
                    <text class="card-lable">数量</text>
                    <text class="card-value">N0316501739698050</text>
                </view>
                <view class="card-flex">
                    <text class="card-lable">总价</text>
                    <text class="card-value">N0316501739698050</text>
                </view>
                <view class="card-flex">
                    <text class="card-lable">状态</text>
                    <text class="card-value">N0316501739698050</text>
                </view>
            </view>

            <view class="card">
                <view class="card-title" style="display: flex;align-items: center;">
                    <text style="flex: 1;text-align: left;">交易信息</text>
                    <text style="width: 462rpx;text-align: center;color: #FF4C1E;">必须使用本人绑定平台的银行卡进行转
                        账购买，否则任何转账视为无效！</text>
                </view>
                <view class="divider"></view>
                <view class="card-flex">
                    <text class="card-lable">卖方</text>
                    <text class="card-value">用户2219517</text>
                </view>
                <view class="card-flex">
                    <text class="card-lable">邮箱</text>
                    <text class="card-value">1298573845748@qq.com</text>
                </view>
                <view class="card-flex">
                    <text class="card-lable">姓名</text>
                    <view @click="handelCopy('用户2219517')">
                        <text class="card-value">用户2219517</text>
                        <img style="width: 22rpx;height: 22rpx;margin-left: 10rpx;"
                            src="../../static/img/copy_icon.png" />
                    </view>
                </view>
                <view class="card-flex">
                    <text class="card-lable">开户行</text>
                    <view @click="handelCopy('用户2219517')">
                        <text class="card-value">用户2219517</text>
                        <img style="width: 22rpx;height: 22rpx;margin-left: 10rpx;"
                            src="../../static/img/copy_icon.png" />
                    </view>
                </view>
                <view class="card-flex">
                    <text class="card-lable">卡号</text>
                    <view @click="handelCopy('用户2219517')">
                        <text class="card-value">用户2219517</text>
                        <img style="width: 22rpx;height: 22rpx;margin-left: 10rpx;"
                            src="../../static/img/copy_icon.png" />
                    </view>
                </view>
            </view>
        </view>
        <view v-if="true" :style="{ marginBottom: safeAreaBottom }">
            <view class="btn btn-active">上传凭证</view>
            <view class="btn">取消交易</view>
        </view>
        <view v-if="false" :style="{ marginBottom: safeAreaBottom }">
            <view class="btn btn-active" style="opacity: 0.5;">审核中</view>
            <view class="btn">联系客服</view>
        </view>

        <uni-popup ref="password" type="center">
            <view class="content">
                <view class="title">交易密码</view>
                <view class="divider" style="margin-bottom: 36rpx;"></view>
                <jpCoded :codes="password" @inputVal="handelPasswordInput"/>
                <view class="card-flex" style="margin-top: 54rpx;">
                    <view class="dialog-btn" @click="$refs.password.close()">取消</view>
                    <view class="dialog-btn" style="background: #2E3C86;" @click="handelConfirm">确认</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import jpCoded from '../../components/jp-coded/jp-coded.vue';
export default {
    components:{ jpCoded },
    data() {
        return {
            safeAreaBottom: '',
            password: ''
        };
    },
    mounted() {
        const { safeAreaInsets } = uni.getSystemInfoSync();
        this.bottom = safeAreaInsets.bottom + 'px';
    },
    methods: {
        handelCopy(value){
            uni.setClipboardData({
			data: value,
			success: function () {
				uni.showToast({
					title: '复制成功',
					icon: 'none',
					duration: 2000
				})
			}
		});
        },
        openDialog() {
            this,password = '';
            this.$refs.password.open();
        },
        handelConfirm(){
            this.$refs.password.close();
        },
        handelPasswordInput(value){
            this.password = value;
        } 
    },
}
</script>

<style scoped lang="scss">
.container {
    width: 100vw;
    height: 100vh;
    background: #F8F9FD;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card {
    width: 698rpx;
    margin: 0 auto;
    height: 472rpx;
    background: #FFFFFF;
    border-radius: 8rpx;
    padding: 24rpx;
    box-sizing: border-box;

}

.card-title {
    font-weight: 500;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
}

.card-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}

.divider {
    height: 2rpx;
    background: #DFDFDF;
    width: 100%;
    margin: 16rpx 0;
}

.card-lable {
    font-size: 24rpx;
    color: #999999;
    line-height: 60rpx;
}

.car-value {
    font-weight: 500;
    font-size: 26rpx;
    color: #333333;
    line-height: 60rpx;
}

.btn {
    width: 648rpx;
    height: 104rpx;
    text-align: center;
    line-height: 104rpx;
    font-weight: 500;
    font-size: 32rpx;
    color: #FFFFFF;
    border-radius: 52rpx;
    margin: 26rpx auto;
    background: #E5E5E5;
    color: #333333;
}

.btn-active {
    color: #FFFFFF;
    background: linear-gradient(173deg, #242E6B 0%, #0062C5 53%, #0F3665 100%);
}

.countdown-time {
    .time {
        width: 100%;
        text-align: center;
        font-weight: 500;
        font-size: 64rpx;
        color: #FF4C1E;
        line-height: 90rpx;
        margin-top: 50rpx;
    }

    .text {
        width: 100%;
        text-align: center;
        font-weight: 500;
        font-size: 26rpx;
        color: #333333;
        line-height: 36rpx;
        margin-top: 8rpx;
    }
}

    .content {
        width: 612rpx;
        height: 406rpx;
        background: #FFFFFF;
        border-radius: 16rpx;
        padding: 20rpx;
        box-sizing: border-box;
    }

    .title {
        font-size: 32rpx;
        color: #333333;
        text-align: center;
        margin: 22rpx auto;
    }

    .dialog-btn {
        width: 250rpx;
        height: 86rpx;
        line-height: 86rpx;
        text-align: center;
        background: rgba(46, 60, 134, 0.36);
        border-radius: 44rpx;
        color: #FFFFFF;
    }
</style>